import Vue from 'vue';
import store from '../store';
import VueRouter from 'vue-router';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import { Session } from '@/utils/storage';
import { getToken } from '@/utils/auth'
import { PrevLoading } from '@/utils/loading.js';
import { getMenuAdmin, getMenuTest } from '@/api/menu';

// 解决 `element ui` 导航栏重复点菜单报错问题
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
	return originalPush.call(this, location).catch((err) => err);
};

// 安装 VueRouter 插件
Vue.use(VueRouter);

// 定义动态路由
const dynamicRoutes = [
	{
		path: '/',
		name: '/',
		component: 'layout/index',
		redirect: '/home',
		meta: {
			isKeepAlive: true,
		},
		children: [],
	},
];

// 定义静态路由
const staticRoutes = [
	{
		path: '/login',
		name: 'login',
		component: () => import('@/views/login'),
		meta: {
			title: '登录',
		},
	},
	{
		path: '/404',
		name: 'notFound',
		component: () => import('@/views/error/404.vue'),
		meta: {
			title: '找不到此页面',
		},
	},
	{
		path: '/401',
		name: 'noPower',
		component: () => import('@/views/error/401.vue'),
		meta: {
			title: '没有权限',
		},
	},
];

// 加载静态路由
const createRouter = () =>
	new VueRouter({
		routes: staticRoutes,
	});

// 创建路由
const router = createRouter();

// 加载 loading
PrevLoading.start();

// 多级嵌套数组处理成一维数组
export function formatFlatteningRoutes(arr) {
	if (arr.length <= 0) return false;
	for (let i = 0; i < arr.length; i++) {
		if (arr[i].children) {
			arr = arr.slice(0, i + 1).concat(arr[i].children, arr.slice(i + 1));
		}
	}
	return arr;
}

// 处理 tagsViewList 数据，默认路由全部缓存
// isKeepAlive 处理 `name` 值，进行路由缓存
export function formatTwoStageRoutes(arr) {
	if (arr.length <= 0) return false;
	const newArr = [];
	const cacheList = [];
	arr.forEach((v) => {
		newArr.push({ ...v });
		cacheList.push(v.name);
		store.dispatch('keepAliveNames/setCacheKeepAlive', cacheList);
	});
	return newArr;
}

// 判断路由 meta.roles 中是否包含当前登录用户权限字段
export function hasAuth(roles, route) {
	if (route.meta && route.meta.roles) return roles.some((role) => route.meta.roles.includes(role));
	else return true;
}

// 递归过滤有权限的路由
export function setFilterMenuFun(routes, role) {
	const menu = [];
	routes.forEach((route) => {
		const item = { ...route };
		if (hasAuth(role, item)) {
			if (item.children) item.children = setFilterMenuFun(item.children, role);
			menu.push(item);
		}
	});
	return menu;
}

// 缓存多级嵌套数组处理后的一维数组(tagsView、菜单搜索中使用：未过滤隐藏的(isHide))
export function setCacheTagsViewRoutes(arr) {
	// 先处理有权限的路由，否则 tagsView、菜单搜索中无权限的路由也将显示
	let rolesRoutes = setFilterMenuFun(arr, store.state.userInfos.userInfos.roles);
	// 添加到 vuex setTagsViewRoutes 中
	store.dispatch('tagsViewRoutes/setTagsViewRoutes', formatTwoStageRoutes(formatFlatteningRoutes(rolesRoutes)));
}

// 递归处理多余的 layout : <router-view>，让需要访问的组件保持在第一层 layout 层。
// 因为 `keep-alive` 只能缓存二级路由
// 默认初始化时就执行
export function keepAliveSplice(to) {
	if (to.matched && to.matched.length > 2) {
		to.matched.map((v, k) => {
			if (v.components.default instanceof Function) {
				v.components.default().then((components) => {
					if (components.default.name === 'parent') {
						to.matched.splice(k, 1);
						router.push({ path: to.path, query: to.query });
						keepAliveSplice(to);
					}
				});
			} else {
				if (v.components.default.name === 'parent') {
					to.matched.splice(k, 1);
					keepAliveSplice(to);
				}
			}
		});
	}
}

// 处理后端返回的 `component` 路径，拼装实现懒加载
export function loadView(path) {
	if (path.indexOf('layout') > -1) return () => Promise.resolve(require(`@/${path}`));
	else return () => Promise.resolve(require(`@/views/${path}`));
}

// 递归处理每一项 `component` 中的路径
export function dynamicRouter(routes) {
	return routes.map((view) => {
		if (view.component) view.component = loadView(view.component);
		if (view.children) dynamicRouter(view.children);
		return view;
	});
}

// 添加路由，模拟数据与方法，可自行进行修改 admin
// 添加动态路由，`{ path: '*', redirect: '/404' }` 防止页面刷新，静态路由丢失问题
// next({ ...to, replace: true }) 动态路由 addRoute 完毕后才放行，防止刷新时 NProgress 进度条加载2次
// 文档地址：https://router.vuejs.org/zh/api/#router-addroutes
export function adminUser(router, to, next) {
	let myRes  = {
		"code": 0,
		"data": [
			{
				"path": "/home",
				"name": "home",
				"component": "home",
				"meta": {
					"title": "首页",
					"isLink": "",
					"isHide": false,
					"isKeepAlive": true,
					"isAffix": true,
					"isIframe": false,
					"roles": ["admin", "common"],
					"icon": "iconfont icon-shouye"
				}
			},
			{
				"path": "/tools",
				"name": "tools",
				"component": "tools",
				"meta": {
					"title": "工具类集合",
					"isLink": "",
					"isHide": false,
					"isKeepAlive": true,
					"isAffix": false,
					"isIframe": false,
					"roles": ["admin", "common"],
					"icon": "iconfont icon-gongju"
				}
			},
			{
				"path": "/menu",
				"name": "menu",
				"component": "layout/routerView/parent",
				"redirect": "/menu/menu1",
				"meta": {
					"title": "菜单嵌套",
					"isLink": "",
					"isHide": false,
					"isKeepAlive": true,
					"isAffix": false,
					"isIframe": false,
					"roles": ["admin", "common"],
					"icon": "iconfont icon-caidan"
				},
				"children": [
					{
						"path": "/menu/menu1",
						"name": "menu1",
						"component": "layout/routerView/parent",
						"redirect": "/menu/menu1/menu11",
						"meta": {
							"title": "菜单1",
							"isLink": "",
							"isHide": false,
							"isKeepAlive": true,
							"isAffix": false,
							"isIframe": false,
							"roles": ["admin", "common"],
							"icon": "iconfont icon-caidan"
						},
						"children": [
							{
								"path": "/menu/menu1/menu11",
								"name": "menu11",
								"component": "menu/menu1/menu11/index",
								"meta": {
									"title": "菜单11",
									"isLink": "",
									"isHide": false,
									"isKeepAlive": true,
									"isAffix": false,
									"isIframe": false,
									"roles": ["admin", "common"],
									"icon": "iconfont icon-caidan"
								}
							},
							{
								"path": "/menu/menu1/menu12",
								"name": "menu12",
								"component": "layout/routerView/parent",
								"redirect": "/menu/menu1/menu12/menu121",
								"meta": {
									"title": "菜单12",
									"isLink": "",
									"isHide": false,
									"isKeepAlive": true,
									"isAffix": false,
									"isIframe": false,
									"roles": ["admin", "common"],
									"icon": "iconfont icon-caidan"
								},
								"children": [
									{
										"path": "/menu/menu1/menu12/menu121",
										"name": "menu121",
										"component": "menu/menu1/menu12/menu121/index",
										"meta": {
											"title": "菜单121",
											"isLink": "",
											"isHide": false,
											"isKeepAlive": true,
											"isAffix": false,
											"isIframe": false,
											"roles": ["admin", "common"],
											"icon": "iconfont icon-caidan"
										}
									},
									{
										"path": "/menu/menu1/menu12/menu122",
										"name": "menu122",
										"component": "menu/menu1/menu12/menu122/index",
										"meta": {
											"title": "菜单122",
											"isLink": "",
											"isHide": false,
											"isKeepAlive": true,
											"isAffix": false,
											"isIframe": false,
											"roles": ["admin", "common"],
											"icon": "iconfont icon-caidan"
										}
									}
								]
							},
							{
								"path": "/menu/menu1/menu13",
								"name": "menu13",
								"component": "menu/menu1/menu13/index",
								"meta": {
									"title": "菜单13",
									"isLink": "",
									"isHide": false,
									"isKeepAlive": true,
									"isAffix": false,
									"isIframe": false,
									"roles": ["admin", "common"],
									"icon": "iconfont icon-caidan"
								}
							}
						]
					},
					{
						"path": "/menu/menu2",
						"name": "menu2",
						"component": "menu/menu2/index",
						"meta": {
							"title": "菜单2",
							"isLink": "",
							"isHide": false,
							"isKeepAlive": true,
							"isAffix": false,
							"isIframe": false,
							"roles": ["admin", "common"],
							"icon": "iconfont icon-caidan"
						}
					}
				]
			},
			{
				"path": "/fun",
				"name": "funIndex",
				"component": "layout/routerView/parent",
				"redirect": "/fun/tagsView",
				"meta": {
					"title": "功能",
					"isLink": "",
					"isHide": false,
					"isKeepAlive": true,
					"isAffix": false,
					"isIframe": false,
					"roles": ["admin", "common"],
					"icon": "iconfont icon-crew_feature"
				},
				"children": [
					{
						"path": "/fun/tagsView",
						"name": "funTagsView",
						"component": "fun/tagsView/index",
						"meta": {
							"title": "tagsView 操作",
							"isLink": "",
							"isHide": false,
							"isKeepAlive": true,
							"isAffix": false,
							"isIframe": false,
							"roles": ["admin", "common"],
							"icon": "el-icon-thumb"
						}
					},
					{
						"path": "/fun/signCanvas",
						"name": "funSignCanvas",
						"component": "fun/signCanvas/index",
						"meta": {
							"title": "在线签名",
							"isLink": "",
							"isHide": false,
							"isKeepAlive": true,
							"isAffix": false,
							"isIframe": false,
							"roles": ["admin", "common"],
							"icon": "el-icon-edit"
						}
					}
				]
			},
			{
				"path": "/system",
				"name": "systemIndex",
				"component": "layout/routerView/parent",
				"redirect": "/system/userManager",
				"meta": {
					"title": "系统管理",
					"isLink": "",
					"isHide": false,
					"isKeepAlive": true,
					"isAffix": false,
					"isIframe": false,
					"roles": ["admin", "common"],
					"icon": "iconfont icon-crew_feature"
				},
				"children": [
					{
						"path": "/system/userManager",
						"name": "systemTagsView",
						"component": "system/userManager/index",
						"meta": {
							"title": "用户管理",
							"isLink": "",
							"isHide": false,
							"isKeepAlive": true,
							"isAffix": false,
							"isIframe": false,
							"roles": ["admin", "common"],
							"icon": "el-icon-thumb"
						}
					},
					{
						"path": "/system/roleManager",
						"name": "systemroleManager",
						"component": "system/roleManager/index",
						"meta": {
							"title": "角色管理",
							"isLink": "",
							"isHide": false,
							"isKeepAlive": true,
							"isAffix": false,
							"isIframe": false,
							"roles": ["admin", "common"],
							"icon": "el-icon-edit"
						}
					},
					{
						"path": "/system/menu",
						"name": "systemMenu",
						"component": "system/menu/index",
						"meta": {
							"title": "菜单管理",
							"isLink": "",
							"isHide": false,
							"isKeepAlive": true,
							"isAffix": false,
							"isIframe": false,
							"roles": ["admin", "common"],
							"icon": "el-icon-thumb"
						}
					},
					{
						"path": "/system/dept",
						"name": "systemDept",
						"component": "system/dept/index",
						"meta": {
							"title": "部门管理",
							"isLink": "",
							"isHide": false,
							"isKeepAlive": true,
							"isAffix": false,
							"isIframe": false,
							"roles": ["admin", "common"],
							"icon": "el-icon-thumb"
						}
					},
					{
						"path": "/system/post",
						"name": "systemPost",
						"component": "system/post/index",
						"meta": {
							"title": "岗位管理",
							"isLink": "",
							"isHide": false,
							"isKeepAlive": true,
							"isAffix": false,
							"isIframe": false,
							"roles": ["admin", "common"],
							"icon": "el-icon-thumb"
						}
					}
				]
			},
			{
				"path": "/pages",
				"name": "pagesIndex",
				"component": "layout/routerView/parent",
				"redirect": "/pages/formAdapt",
				"meta": {
					"title": "页面",
					"isLink": "",
					"isHide": false,
					"isKeepAlive": true,
					"isAffix": false,
					"isIframe": false,
					"roles": ["admin", "common"],
					"icon": "iconfont icon-fuzhiyemian"
				},
				"children": [
					{
						"path": "/pages/formAdapt",
						"name": "pagesFormAdapt",
						"component": "pages/formAdapt/index",
						"meta": {
							"title": "开发页面",
							"isLink": "",
							"isHide": false,
							"isKeepAlive": true,
							"isAffix": false,
							"isIframe": false,
							"roles": ["admin", "common"],
							"icon": "iconfont icon-biaodan"
						}
					}
				]
			},
			{
				"path": "/personal",
				"name": "personal",
				"component": "personal/index",
				"meta": {
					"title": "个人中心",
					"isLink": "",
					"isHide": false,
					"isKeepAlive": true,
					"isAffix": false,
					"isIframe": false,
					"roles": ["admin", "common"],
					"icon": "iconfont icon-gerenzhongxin"
				}
			},
			{
				"path": "/link",
				"name": "layoutLinkView",
				"component": "layout/routerView/parent",
				"meta": {
					"title": "外链",
					"isLink": "https://element-plus.gitee.io/#/zh-CN/component/installation",
					"isHide": false,
					"isKeepAlive": false,
					"isAffix": false,
					"isIframe": false,
					"roles": ["admin"],
					"icon": "iconfont icon-caozuo-wailian"
				}
			},
			{
				"path": "/iframes",
				"name": "layoutIfameView",
				"component": "layout/routerView/parent",
				"meta": {
					"title": "内嵌 iframe",
					"isLink": "https://element-plus.gitee.io/zh-CN/#/zh-CN/component/installation",
					"isHide": false,
					"isKeepAlive": false,
					"isAffix": true,
					"isIframe": true,
					"roles": ["admin"],
					"icon": "iconfont icon-neiqianshujuchucun"
				}
			}
		]
	}
	
	resetRouter();
	getMenuAdmin()
		.then(async (res) => {
			// 读取用户信息，获取对应权限进行判断
			console.log('紧紧',res)
			store.dispatch('userInfos/setUserInfos');
			store.dispatch('routesList/setRoutesList', setFilterMenuFun(myRes.data,  ['admin'] ));
			console.log('紧紧222')
			dynamicRoutes[0].children = myRes.data;
			const awaitRoute = await dynamicRouter(dynamicRoutes);
			[...awaitRoute, { path: '*', redirect: '/404' }].forEach((route) => {
				console.log('紧紧1',route)
				router.addRoute({ ...route });
			});
			setCacheTagsViewRoutes(JSON.parse(JSON.stringify(myRes.data)));
			next({ ...to, replace: true });
		})
		.catch(() => {});
}

// 添加路由，模拟数据与方法，可自行进行修改 test
// 添加动态路由，`{ path: '*', redirect: '/404' }` 防止页面刷新，静态路由丢失问题
export function testUser(router, to, next) {
	resetRouter();
	getMenuTest()
		.then(async (res) => {
			// 读取用户信息，获取对应权限进行判断
			store.dispatch('userInfos/setUserInfos');
			store.dispatch('userInfos/setRoutesList', setFilterMenuFun(res.data, store.state.userInfos.userInfos.roles));
			dynamicRoutes[0].children = res.data;
			const awaitRoute = await dynamicRouter(dynamicRoutes);
			[...awaitRoute, { path: '*', redirect: '/404' }].forEach((route) => {
				router.addRoute({ ...route });
			});
			setCacheTagsViewRoutes(JSON.parse(JSON.stringify(res.data)));
			next({ ...to, replace: true });
		})
		.catch(() => {});
}

// 重置路由
export function resetRouter() {
	router.matcher = createRouter().matcher;
}

// 延迟关闭进度条
export function delayNProgressDone(time = 300) {
	setTimeout(() => {
		NProgress.done();
	}, time);
}

// 动态加载后端返回路由路由(模拟数据)
export function getRouterList(router, to, next) {
 
	if (!Session.get('userInfo')) return false;
	if (Session.get('userInfo').userName === 'admin') adminUser(router, to, next);
	else if (Session.get('userInfo').userName === 'test') testUser(router, to, next);
}

// 路由加载前
router.beforeEach((to, from, next) => {
	keepAliveSplice(to);
	NProgress.configure({ showSpinner: false });
	if (to.meta.title && to.path !== '/login') NProgress.start();
	let token = getToken();
	console.log('哈哈哈',to)
	if (to.path === '/login'  ) {
		console.log(22222,token)
		NProgress.start();
		next();
		delayNProgressDone();
	} else {
		if (!token) {
			NProgress.start();
			next('/login');
			Session.clear();
			delayNProgressDone();
		} else if (token && to.path === '/login') {
			next('/home');
			delayNProgressDone();
		} else {
			console.log(3333)
			if (Object.keys(store.state.routesList.routesList).length <= 0) {
				console.log(444444444)
				getRouterList(router, to, next);
				next( );
				delayNProgressDone();
			} else {
				console.log(555555)
				next( );
				delayNProgressDone(0);
			}
		}
	}
});

// 路由加载后
router.afterEach(() => {
	PrevLoading.done();
	delayNProgressDone();
});

// 导出路由
export default router;
